<template>
  <div class="main-container">
    <div class="main-header">
      <img :src="shop.avatar" alt="店铺背景" />
      <div class="header-text">
        <div class="text-flex">
          <div class="text-left">
            <h3>{{ shop.name }}</h3>
            <p style="color: #666; font-size: 14px">
              <span
                ><van-rate v-model="shop.score" :count="1" />{{
                  shop.score
                }}分</span
              >
              <span>{{ shop.description }}</span>
              <span>配送约{{ shop.deliveryTime }}分钟</span>
            </p>
            <p>新年快乐</p>
          </div>

          <div class="text-right">
            <img :src="shop.avatar" alt="店铺头像" />
          </div>
        </div>
        <div>
          <van-notice-bar
            left-icon="volume-o"
            :scrollable="false"
            class="notice-swipe"
          >
            <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <van-swipe-item v-for="item in shop.supports" :key="item"
                >店铺活动：{{ item }}</van-swipe-item
              >
            </van-swipe>
          </van-notice-bar>
        </div>
        <div class="open">
          <!-- 弹出层 -->
          <van-cell is-link @click="showPopup">店铺公告</van-cell>
          <van-popup v-model="show" position="left" :style="{ height: '90%' }">
            <p>{{ shop.bulletin }}</p>
          </van-popup>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="main-content-table">
        <van-tabs v-model="activeName" color="#FCC541">
          <van-tab title="菜单" name="a" to="/main/goods"></van-tab>
          <van-tab title="评价" name="b" to="/main/evaluate"></van-tab>
          <van-tab title="商家" name="c" to="/main/merchant"></van-tab>
        </van-tabs>
      </div>
      <router-view />
    </div>

    <div class="goods-footer" @click="showslength">
      <van-submit-bar
        class="submit"
        :price="total*100"
        button-text="去结算"
        @submit="onSubmit"
        button-color="#ffcf33"
      >
        <img v-show="x_goodsdata.length==0" src="@/assets/imgs/dark.png" alt="" />
        <img v-show="x_goodsdata.length>0" src="@/assets/imgs/shoplogo.png" alt="" />
      </van-submit-bar>
    </div>
    <!-- 弹出层:写在黑条里面的话，点击蒙层不能关闭而点击弹出层会关闭，导致bug -->
    <van-popup
      v-model="unshow"
      round
      position="bottom"
      :style="{ height: '45%' }"
    >
      <div class="toptitle">
        <span>购物车</span> <span @click="clean">清空购物车</span>
      </div>
      <div v-for="item in x_goodsdata" :key="item.id" class="foxcar">
        <p>{{ item.name }}</p>
        <van-card
          :key="item.id"
          tag="特价"
          :price="item.price"
          :desc="item.goodsDesc"
          :title="item.name"
          :thumb="item.imgUrl"
        >
          <!-- 加减按钮 -->
          <template #footer>
            <button @click="decnums(item.id, x_goodsdata)" class="decnum">
              -
            </button>
            <label>{{ item.count }}</label>
            <button
              @click="$store.commit('moveNum', { id: item.id, num: 1 })"
              class="addnum"
            >
              +
            </button>
          </template>
        </van-card>
        <van-divider />
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// 引入请求
import { $_seller } from "@/api/order";
// 引入ts约束
import { Igoodlist, IFood } from "@/interface/main_interface";
import { GridItem } from "vant";

@Component
export default class Main extends Vue {
  // data
  shop: Igoodlist = {};
  show: boolean = false;
  shows: boolean = false;
  unshow: boolean = false;
  activeName: string = "a";
  num1: number = 0;
  num2: number = 1;

  // methods
  onSubmit(): void {
    console.log("提交");
  }
  showPopup(): void {
    this.show = true;
  }
  // 判断购物车弹出层 没有商品添加不弹出
  showslength(): boolean {
    if (this.x_goodsdata.length > 0) {
      // return this.shows=true
      console.log("大于0了");
      return (this.unshow = true);
    } else {
      console.log("小于0");
      return (this.unshow = false);
    }
    
  }
  // 减号方法
  decnums(id: unknown, count: Array<unknown>): boolean {
    this.$store.commit("moveNum", { id: id, num: -1 });

    // 关闭弹出，等于0 时不能主动关闭，小于等于1才行？？
    if (count.length <= 1) {
      console.log("我没了");
      setTimeout(() => {
        return (this.unshow = false);
      }, 1000);
    } else {
      console.log("我在");
      return (this.unshow = true);
    }
  }
  // 清空购物车
  clean(): void {
    console.log("升级中");
  }

  // computed
  // 引入vuex中的商品数量>0的
  get x_goodsdata(): Array<IFood> {
    //  定义空数组保存数量大于0的数组
    let newarr: Array<IFood> = [];
    // 遍历拿出数据
    this.$store.state.goodsList.forEach((el) => {
      el.foods.forEach((child:any) => {
        if (child.count > 0) newarr.push(child);
      });
    });
    return newarr;
  }
  // 计算总价
  get total():number{
    let pic:number=0;
    for(const item of this.x_goodsdata){
      pic+=item.price*item.count
    }
    return pic
  }

  // 生命周期
  created(): void {
    $_seller().then((res) => {
      console.log(res);
      if (res.status === 200) {
        this.shop = res.data.data;
        // 加载提示
        this.$toast({
          message: "加载成功",
          icon: "like-o",
        });
      }
    });
  }
}
</script>

<style scoped lang="scss">
.main-container {
  width: 100%;
  height: 100%;
  .main-header {
    width: 100%;
    height: 220px;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      filter: blur(4px);
    }
    .header-text {
      position: absolute;
      bottom: 0;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      height: 160px;
      width: 100%;
      background: #fecc1f;

      .text-flex {
        display: flex;
        justify-content: space-evenly;
        position: relative;

        .text-left {
          width: 70%;
          line-height: 0;
        }
        .text-right {
          img {
            position: relative;
            top: -10px;
            border-radius: 10px;
            width: 80px;
            height: 80px;
            filter: blur(0px);
          }
        }
      }
      .notice-swipe {
        background: #fff;
        opacity: 0.8;
        // border-radius: 10px;
        color: #ed5a65;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .main-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .van-submit-bar {
    background: #000;
    z-index: 3000009;
    border-radius: 20px;
    margin-bottom: 10px;
  }
  // 弹出层
  .van-popup {
    height: 120%;
    .toptitle {
      margin: 15px 10px 8px;
      border-bottom: 1px solid #f00;

      display: flex;
      justify-content: space-between;
    }
    .foxcar {
      margin: 20px 10px 0;
      // border-bottom: 1px solid #f00;
    }
  }
  .decnum,
  .addnum {
    width: 28px;
    height: 28px;
    line-height: 22px;
    text-align: center;
    border-radius: 8px;
    border: none;
    font-size: 18px;
    font-weight: 800;
    margin: 0 10px;
  }
  .decnum {
    background: #fff;
    border: 0.1rem solid #ffcc33;
  }
  .addnum {
    background: #ffcc33;
  }
  .van-submit-bar__price{
    color: #fff;
  }
  .van-submit-bar__text{
    color: #ffcc33;
  }
  // 笑脸图片
  .goods-footer{
    img{
       width: 60px;
    }
   
  }
}
</style>